<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>经理业绩</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/public.css" />
		<link rel="stylesheet" href="../css/fund.css">
		<style>
			.wrapper-item .mui-table-view-cell{padding:5px 15px 5px 35px}
			.wrapper-item{padding:0;}
			.wrapper-item a span{width:20%;float:left;text-align:center;padding:10px 0}
			.wrapper-item a span:nth-child(1){width:10%}
			.wrapper-item a span:nth-child(3){width:30%}
			.wrapper-table th{width:20%}
			.wrapper-table th:nth-child(1){width:10%}
			.wrapper-table th:nth-child(3){width:30%}
			@media only screen and (max-width: 320px){
				.wrapper-item .mui-table-view-cell{padding:5px 15px}
			}
		</style>
	</head>
	<body style="overflow-x:hidden">
		<header id="header" class="mui-bar mui-bar-nav jjs-header">
			<h2 class="mui-title">经理业绩</h2>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left header-left-result"></a>
			<a class="mui-icon mui-icon-bars mui-pull-right header-right"></a>
		</header>
		<div class="mui-content fund-net per-content pro-content ranking-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item11">股票型</a>
						<a class="mui-control-item" href="http://www.baidu.com">指数型</a>
						<a class="mui-control-item" href="#">混合型</a>
						<a class="mui-control-item" href="#">保本型</a>
						<a class="mui-control-item" href="#">债券型</a>
						<a class="mui-control-item" href="#">QDII</a>
					</div>
				</div>
				<div class="mui-slider-group">
					<div class="per-wrapper">
						<div class="mui-table-view">
						    <div class="mui-table-view-cell" onclick="strength(this)">
						        <span class="mui-navigate-right wrapper-title"><i></i>经理实力</span>
						    </div>
						    <div class="wrapper-bottom">
							    <div class="mui-row wrapper-list">
							        <div class="mui-col-sm-6 mui-col-xs-6">
							            <div class="mui-table-view-cell">
											<i class="average"></i>当前经理：80%
							            </div>
							        </div>
							        <div class="mui-col-sm-6 mui-col-xs-6">
							            <div class="mui-table-view-cell">
							                <i class="similar"></i>同类经理：19.12%
							            </div>
							        </div>
							    </div>
							    <div id="strength"></div>
							    <div class="mui-row wrapper-item">
							        <div class="mui-col-sm-6 mui-col-xs-6">
							            <div class="mui-table-view-cell">
											旗下经理数：<span>3个</span>
							            </div>
							        </div>
							        <div class="mui-col-sm-6 mui-col-xs-6">
							            <div class="mui-table-view-cell">
							                	所有经理数：<span>245个</span>
							            </div>
							        </div>
							        <div class="mui-col-sm-6 mui-col-xs-6">
							            <div class="mui-table-view-cell">
							                	平均经理数：<span>4.08</span>
							            </div>
							        </div>
							        <div class="mui-col-sm-6 mui-col-xs-6">
							            <div class="mui-table-view-cell">
											公司排名：<span>41/60</span>
							            </div>
							        </div>
							    </div>
							</div>
						</div>
					</div>
					<div class="per-wrapper">
						<div class="mui-table-view">
						    <div class="mui-table-view-cell" onclick="average(this)">
						        <span class="mui-navigate-right wrapper-title"><i></i>股票型-经理平均回报排名分布</span>
						    </div>
						    <div class="wrapper-bottom">
							    <div class="mui-row wrapper-list">
							        <div class="mui-col-sm-12 mui-col-xs-12">
							            <div class="mui-table-view-cell">
											<i class="average"></i>2017-10-13更新
							            </div>
							        </div>
							    </div>
							    <table class="mui-table wrapper-table">
							    	<thead>
							    		<tr>
							    			<th>编号</th>
							    			<th>基金经理</th>
							    			<th>基金简称</th>
							    			<th>管理时间</th>
							    			<th>任期回报</th>
							    		</tr>
							    	</thead>
							    </table>
							    <ul class="wrapper-item">
							    	<li>
							    		<a href="http://www.baidu.com" class="mui-clearfix">
							    			<span>1</span>
							    			<span>刘强东</span>
							    			<span class="mui-ellipsis">华宝兴lkdsf业执照股票</span>
							    			<span>2年306天</span>
							    			<span>4.02%</span>
							    		</a>
							    	</li>
							    	<li>
							    		<a href="http://www.baidu.com" class="mui-clearfix">
							    			<span>1</span>
							    			<span>刘强东</span>
							    			<span class="mui-ellipsis">华宝兴lkdsf业执照股票</span>
							    			<span>2年306天</span>
							    			<span>4.02%</span>
							    		</a>
							    	</li>
							    </ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/echarts-all-3.js"></script>
		<script src="../js/public.js"></script>
		<script>
			function average(e){
				$(e).parent().find(".wrapper-bottom").toggle()
			}
			
			function strength(e){
				$(e).parent().find(".wrapper-bottom").toggle()
			}

			var myChart = echarts.init(document.getElementById('strength'));
			 option = {
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    series : [
			        {
			            name:'基金搜',
			            type:'pie',
			            radius : '55%',
			            center: ['50%', '50%'],
			            data:[
			                {value:3305, name:'同类经理'},
			                {value:310, name:'当前经理'},
			            ]
			        }
			    ]
			}
			myChart.setOption(option);
		</script>
	</body>
</html>